<template>
  <!-- 商城商品不限制展示价格 只有其他模块ios不展示 -->
  <div v-if="(!$isWxAppIos()) || ($isWxAppIos() && from == 'mall')" class="c-p">
    <img class="c-hh32 c-pa c-p-r24 c-p-t20" :src="marketBg[type]" alt="">
    <div class="c-hh128 c-pt16" :class="marketColorName">
      <div class="c-flex-row c-aligni-center c-ph24">
        <div class="c-fs48 c-fc-white"><span class="c-fs28 c-fw-b">{{'￥' | iosPriceFilter}}</span><span class="c-fw-b">{{Number(price).toFixed(2)}}</span><span class="c-fs28" v-if="from == 'activity' || from == 'activities' || (type == 'isCollocation' && comboType == 2 && isMultiple)">{{' 起'}}</span></div>
        <div v-if="type != 'isCollocation' && (!optimal || (optimal && type == 'isFa'))" class="c-flex-row c-aligni-center c-hh40 c-ml10 ">
          <div class="popLeft c-h c-ml-1"></div>
          <div class="c-fs20 c-fw-b c-flex-row c-flex-center fc-benefit popCenter c-h c-lh40">
            <template v-if="type != 'isPreSale'">
              {{type == 'isSale' ? '折后价' : type == 'isBargain' ? '砍价享' : type == 'isFa' ? '免费领取' : (type == 'isCollage' && from == 'activity' ? '人多更优惠' : `${peopleNum}人拼团`)}}
            </template>
            <template v-else>
              <span class="c-text-decoration-through">￥{{originalPrice}}</span>
            </template>
          </div>
          <div class="popRight c-h"></div>
        </div>
        <div v-else-if="type != 'isCollocation' && showPriceInOptimal" class="c-flex-row c-aligni-center priceTag c-fw-b c-fs24 c-lh28 c-fc-xblack c-pv4 c-pl4 c-pr10 c-ml10">
          <div class="txtBg c-textAlign-c c-ph8 c-pv6">
            <img v-if="optimal.optimalPriceType == 2" class="c-hh20 c-mlr-auto" :src="require('/src/assets/i/wap/optimalPrice/vip.png')" alt="">
            <img v-else-if="optimal.optimalPriceType == 3" class="c-hh20 c-mlr-auto" :src="require('/src/assets/i/wap/optimalPrice/svip.png')" alt="">
            <span v-else class="c-fs20 c-fw-b c-fc-white c-lh">专享</span>
          </div>{{'￥' | iosPriceFilter}}{{optimal.optimalPrice}}
        </div>
        <div class="c-fs20 c-fc-white c-ph10" v-if="type == 'isBargain' && isLimit">仅剩：{{stockBargain}}</div>
        <div v-if="showCoupon" @click="clickCoupon" class="c-ww130 c-hh44 exchange-bg c-br4 c-ml20 c-p swing"></div>
      </div>
      <div class="c-flex-row c-justify-sb c-ph24 c-mt4 c-lh28">
        <div v-if="type == 'isCollocation' && (Number(originalPrice) <= 0 || comboType == 3)"></div>
        <div v-else class="c-fs20 c-fc-white c-lh28 maxw300">{{type == 'isPreSale' ? '定金' : type == 'isCollage' || type == 'isBargain' ? '单买价' : type == 'isCollocation' ? (comboType == 1 || isMultiple ? '最多可省' : '立省') : '原价'}}:<span v-if="type == 'isPreSale'" class="c-pl6">￥{{deposit}}</span><span v-else-if="from == 'activity' || from == 'activities'" class="c-pl6">￥{{originalPrice}}</span><span v-else class="c-pl6">{{'￥' | iosPriceFilter}}{{Number(originalPrice).toFixed(2)}}</span><span v-if="from == 'mall' && type != 'isBargain'" class="c-ml16">&nbsp;&nbsp;&nbsp;&nbsp;库存: {{stock}}</span></div>
        <div v-show="type == 'isCollocation' && status == -1" class="c-fs20 c-fc-white">已结束</div>
        <div v-show="type != 'isCollocation' || status != -1" class="c-fs20 c-fc-white"><span>距{{status == 1 ? '开始' : '结束'}}</span>
          <cj-clocker :time="type == 'isBargain' ? bargainTimeFun() : timeFn()" @on-finish="type == 'isBargain' ? bargainFinishFun() : finishFn()">:
            <template v-slot="{ timeInfo }">
              <span class="c-pl8">{{timeInfo.D}}天</span><span>{{timeInfo.H}}</span>:<span>{{timeInfo.M}}</span>:<span>{{timeInfo.S}}</span>
            </template>
          </cj-clocker>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'FlashSalesTime',
  props: {
    price: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    },
    originalPrice: {
      type: String,
      default: ''
    },
    stock: {
      type: Number,
      default: 0
    },
    stockBargain: {
      type: Number,
      default: 0
    },
    isLimit: { //false: 不限数量 true：数量有限
      type: Boolean,
      default: false
    },
    salesTag: {
      type: String,
      default: '限时折扣'
    },
    showCoupon: {
      type: Boolean,
      default: false
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    peopleNum: { //拼团人数
      type: Number,
      default: 0
    },
    from: {
      type: String,
      default: ''
    },
    isPreheat: {
      type: Number,
      default: 0
    },
    bargainStatus: {
      type: Number,
      default: 0
    },
    deposit: {
      type: Number,
      default: 0
    },
    comboType: { //1：自选 2：固定 3：不展示
      type: Number,
      default: 1
    },
    optimal: {
      type: Object,
      default: () => {
        return null
      }
    },
  },
  data() {
    return {
      status: 0,
      marketBg: {
        'isPreSale': require("../../assets/i/wap/market/presale.png"), // 限时预售
        'isSale': require("../../assets/i/wap/market/sale.png"), // 限制折扣
        'isFa': require("../../assets/i/wap/market/friend.png"), // 助力好友
        'isBargain': require("../../assets/i/wap/market/bargain.png"), // 助力砍价
        'isCollocation': require("../../assets/i/wap/market/colloctation.png"), // 搭配购
        'isCollage': require("../../assets/i/wap/market/collage.png"), // 限时拼团
      },
      marketColorName: localStorage.getItem('marketColorName') ? localStorage.getItem('marketColorName') : 'mk_red'
    }
  },
  computed: {
    // 展示当前身份的最低价格
    showPriceInOptimal () {
      // optimalPriceType：1 产品本身价格 2 vip价格 3 svip价格 4 服务商 101 限时购 102 拼团 112 砍价  10 链动会员 20 链动代理商 99 链动复购
      return this.optimal && ![1, 101, 102, 112].includes(this.optimal.optimalPriceType)
    },
  },
  methods: {
    //限时购倒计时
    timeFn: function () {
      let stime = this.startTime ? utilJs.getTimeByDate(this.startTime) : 0;
      let etime = this.endTime ? utilJs.getTimeByDate(this.endTime) : 0;
      let nowTime = (new Date()).getTime();
      //限时购 sales.status 1未开始,2进行中,-1已结束
      //拼团 .status 1未开始,2进行中,3已结束,4已停止
      //好友助力 .faStatus 1未开始,2进行中,-1已结束
      let time = '';
      if (stime > nowTime) {
        this.status = 1;
        time = this.startTime;
      } else if (etime > nowTime) {
        this.status = 2;
        time = this.endTime;
      } else {
        if (this.type == 'isCollage') {
          this.status = 3;
        } else {
          this.status = -1;
        }
      }
      this.$emit('falshSalesTime', this.status);
      return time;
    },
    bargainTimeFun() {
      let time = '';
      if (this.isPreheat == 1 && this.bargainStatus == 1) {
        this.status = 1
        time = this.startTime;
      } else if (this.bargainStatus == 2) {
        this.status = 2
        time = this.endTime;
      } else if (this.bargainStatus == 3) {
        this.status = 3
      } else {
        this.status = 4;
      }
      this.$emit('falshSalesTime', this.status);
      return time;
    },
    bargainFinishFun() {
      if (this.status == 1) {
        this.status = 2;
        this.bargainTimeFun();
      } else {
        this.status = 3;
      }
      this.$emit('finishFlashSales', this.status);
    },
    finishFn() {
      if (this.status == 1) {
        this.status = 2;
        this.timeFn();
      } else {
        if (this.type == 'isCollage') {
          this.status = 3;
        } else {
          this.status = -1;
        }
      }
      this.$emit('finishFlashSales', this.status);
    },
    clickCoupon() {
      this.$emit('showCoupon');
    }
  }
}
</script>
<style scoped>
.mk_red {
  background: url("../../assets/i/wap/market/mk_red.png") no-repeat 100%;
  background-size: 100% 100%;
}
.mk_orange  {
  background: url("../../assets/i/wap/market/mk_orange .png") no-repeat 100%;
  background-size: 100% 100%;
}
.mk_pink {
  background: url("../../assets/i/wap/market/mk_pink.png") no-repeat 100%;
  background-size: 100% 100%;
}
.mk_green {
  background: url("../../assets/i/wap/market/mk_green.png") no-repeat 100%;
  background-size: 100% 100%;
}
.mk_purple {
  background: url("../../assets/i/wap/market/mk_purple.png") no-repeat 100%;
  background-size: 100% 100%;
}
.mk_blue {
  background: url("../../assets/i/wap/market/mk_blue.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-sales {
  background: url("../../../public/i/wap/course/salesBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-collage {
  background: url("../../../public/i/wap/course/collageBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-fa {
  background: url("../../../public/i/wap/course/friendsHelpBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-bargain {
  background: url("../../../public/i/wap/course/bargainBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-presale {
  background: url("../../../public/i/wap/course/presaleBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.bg-collocation {
  background: url("../../../public/i/wap/course/collocationBg.png") no-repeat 100%;
  background-size: 100% 100%;
}
.fc-benefit {
  color: #FF254A;
}
.exchange-bg {
  background: url("../../../public/i/wap/coupon/get_coupon.png") no-repeat 100%;
  background-size: 100% 100%;
}
.swing {
  animation: startAni 3s linear infinite;
  -webkit-animation: startAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.sales-fc {
  color: #FFEA67;
}

@keyframes startAni {
  0% {
    left: 0;
  }
  2% {
    left: -0.3rem;
  }
  6% {
    left: 0.3rem;
  }
  8% {
    left: 0rem;
  }
  100% {
    left: 0rem;
  }
}
.popLeft {
  width: 0.4rem;
  background-image: url('../../../public/i/wap/course/popLeft.png');
  background-size: 100% 100%;
}
.popCenter {
  background-image: url('../../../public/i/wap/course/popCenter.png');
  background-size: auto 100%;
  background-repeat: repeat;
}
.popRight {
  width: 0.4rem;
  background-image: url('../../../public/i/wap/course/popRight.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.c-ml8 {
  margin-left: 0.2rem;
}
.maxw300 {
  max-width: 7.5rem;
}
.priceTag {
  background: #FFFFFF;
  border-radius: 0.5rem 0.2rem 0.2rem 0.2rem;
}
.txtBg {
  background-image: linear-gradient(224deg, #2F1E10 0%, #414141 96%);
  border-radius: 0.4rem 0 0.15rem 0.15rem;
}
</style>


